<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>登录 | 智慧海洋牧场</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    *{box-sizing:border-box;margin:0;padding:0;font-family:'Noto Sans SC',sans-serif;}
    html,body{height:100%;width:100%;overflow:hidden;}
    .container{display:flex;height:100%;}

    /* 左侧蓝色区 + 渐变 */
    .left{
      flex:1.2; /* 稍宽 */
      /* 双色径向渐变：中心亮蓝，外部深蓝，居左 */
      background: radial-gradient(circle at 35% 50%, #2196f3 0%, #1e88e5 40%, #0d6cd3 100%);
      position:relative;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
      padding:0 2rem;clip-path:ellipse(85% 100% at 0% 50%);
    }
    .left h1{font-size:2.4rem;font-weight:700;margin-bottom:.8rem;}
    .left p{font-size:1rem;margin-bottom:1.5rem;opacity:.9;}
    .outline-btn{background:transparent;border:2px solid #fff;color:#fff;padding:.6rem 2.4rem;border-radius:999px;font-size:1rem;cursor:pointer;transition:background .3s,color .3s;}
    .outline-btn:hover{background:#fff;color:#1e88e5;}

    /* 插图羽化效果 */
    .ill-wrap{width:60%;max-width:260px;margin-top:3rem;}
    .ill-wrap img{width:100%;display:block;
      /* 羽化：中心完全显示，边缘渐隐 */
      mask-image: radial-gradient(circle 75% at center, #000 60%, transparent 100%);
      /* Safari 阶段性需 -webkit- 前缀 */
      -webkit-mask-image: radial-gradient(circle 75% at center, #000 60%, transparent 100%);
    }

    /* 右侧表单区 */
    .right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;}
    .right h2{font-size:2rem;font-weight:700;margin-bottom:2.5rem;color:#333;}
    .input-wrapper{width:70%;max-width:350px;display:flex;flex-direction:column;gap:1.1rem;}
    .input-box{background:#efefef;border-radius:8px;display:flex;align-items:center;padding:.85rem 1rem;gap:.8rem;}
    .input-box i{color:#9e9e9e;}
    .input-box input{border:none;background:transparent;outline:none;width:100%;font-size:1rem;color:#333;}
    .login-btn{margin-top:1.5rem;background:#1e88e5;border:none;width:100%;padding:.85rem;border-radius:999px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:background .3s;}
    .login-btn:hover{background:#0069c0;}

    /* 响应式 */
    @media(max-width:768px){
      .container{flex-direction:column;}
      .left{clip-path:none;width:100%;height:45%;border-bottom-right-radius:50% 20%;border-bottom-left-radius:50% 20%;}
      .right{height:55%;}
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 左侧欢迎区 -->
    <section class="left">
		<!-- 插图容器 -->
      <div class="ill-wrap"><img src="/static/img/loginlog.jpg" alt="登录插图"></div>
      <h1>加入我们</h1>
      <p>加入我们，成为本站的一份子。</p>
      <form action="/turn_to_register" method="post"><button class="outline-btn" type="submit">去注册</button></form>
      
    </section>

    <!-- 右侧登录区 -->
    <section class="right">
      <h2>登录</h2>
      <form class="input-wrapper" action="/login" method="post">
        <div class="input-box"><i class="fa-solid fa-user"></i><input type="text" name="nm" placeholder="用户名" required></div>
        <div class="input-box"><i class="fa-solid fa-lock"></i><input type="password" name="pd" placeholder="密码" required></div>
        <button type="submit" class="login-btn">立即登录</button>
      </form>
    </section>
  </div>
</body>
</html>
